<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card title="费用查询">
      <a-form layout="inline">
        <a-form-item label="名称">
          <a-input v-model:value="queryParams.name" />
        </a-form-item>
        <a-form-item label="费用类型">
          <expense-type-selection @expenseTypeSelected="expenseTypeSelected" />
        </a-form-item>
        <a-form-item label="发生日期">
          <a-range-picker v-model:value="dateRangeRef" valueFormat="yyyy-MM-DD" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="query">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <!--      <a-divider style="border-color: #7cb305" dashed />-->
    <a-card title="查询结果">
      <a-table
        :columns="columns"
        :data-source="resultDataSet"
        rowKey="uid"
        :pagination="paginationConfig"
      />
    </a-card>
  </a-space>
</template>

<script lang="ts" setup>
import { useExpenseListFunctions } from '@/views/finance/expense/list/expenseListFunctions'
import ExpenseTypeSelection from '@/components/chunfeng/expense-type/ExpenseTypeSelection.vue'

const {
  paginationConfig,
  columns,
  reset,
  query,
  resultDataSet,
  queryParams,
  expenseTypeSelected,
  dateRangeRef,
} = useExpenseListFunctions()
</script>
